<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .module_row ul li{
            list-style: none;
            width: 296px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .module_row ul li:nth-of-type(odd){
            margin-left: 16px;
            margin-right: 8px;
        }
        .module_row ul li:nth-of-type(even){
            margin-right: 16px;
            margin-left: 8px;
        }
        .module_row ul li img{
            width: 296px;
        }
    </style>
</head>
<body>
    <div class="module_row">
        <ul id="uls"></ul>
    </div>
    <script>
        var arr = [
            {name:"张三"},
            {name:"李四"},
            {name:"王五"},
        ]
        arr[0] = {name:"小张"}
        console.log(arr)
        
        let imgList = [
            "https://s5.mogucdn.com/mlcdn/c45406/210418_62057aajg5415gfgfeijfg1ha5i0k_810x1080.jpg_600x9999.v1c7E.70.webp",
            "https://s5.mogucdn.com/mlcdn/c45406/210331_2hb3f0bag48j02f749h6ckc3cj3d6_607x1080.jpg_600x9999.v1c7E.70.webp",
            "https://s11.mogucdn.com/mlcdn/c45406/210305_2hcfl5c03afl54g39c7hb34i64617_716x1028.jpg_600x9999.v1c7E.70.webp",
            "https://s5.mogucdn.com/mlcdn/c45406/210419_0b017jbl815k5395b07041g2ihfe8_981x981.jpg_600x9999.v1c7E.70.webp",
            "https://s5.mogucdn.com/mlcdn/c45406/210322_32afgdc0b0b41iaag996aj144c508_1080x1080.jpg_600x9999.v1c7E.70.webp"
        ]
        let uls = document.getElementById("uls"); 
        function createDiv(imgs){
            for(let i = 0; i<imgList.length; i++){
                let li = document.createElement("li")
                let img = document.createElement("img");
                img.src = imgs[i];
                li.appendChild(img);
                uls.appendChild(li)
            }
            waterFall()
        }
        createDiv(imgList)

        function waterFall(){
            let gap = 24; // 图片左右外边距
            let item = uls.children; // 所有图片
            let pageWidth = window.innerWidth; // 屏幕宽度
            let itemWidth = uls.children[0].offsetWidth; // 图片宽度
            let itemWidthGap = itemWidth + gap; // 宽度+外边距
            let columns = parseInt(pageWidth / itemWidthGap); // 一行可以放置图片个 数    个数 = 屏幕宽度 / 图片宽度
            let arrHeight = []; // 存储处理过图片空数组

            for(let i = 0; i<item.length; i++){
                let j = i % columns;
                if(i<columns){
                    item[i].style.top = "0px";
                    item[i].style.left = j * itemWidthGap + "px"
                    arrHeight.push(item[i].offsetHeight);
                }else{
                    let minHeight = arrHeight[0];
                    let index = 0;
                    for(let z = 0; z<arrHeight.length; z++){
                        if(minHeight > arrHeight[z]){
                            minHeight = arrHeight[z];
                            index = z;
                        }
                    }
                    item[i].style.top = arrHeight[index] + gap + "px";
                    item[i].style.left = itemWidthGap * index + "px";
                    arrHeight[index] = arrHeight[index] + gap + item[i].offsetHeight;
                }
            }
        }

        // 滚动事件
        window.onscroll = function(){
            let scroll = window.pageYOffset;
            let client = window.innerHeight;
            if(scroll + client >= uls.children[uls.children.length-1].offsetTop){
                createDiv(imgList)
            }
        }


        // 屏幕缩放监听
        window.onresize = function(){
            waterFall()
        }
        // 通过.offsetHeight获取高度与实际高度不一致
        // 原因在于div里面有img
        // 必须等页面加载完成后才能获取正确值
        // 所以在onload的方法里获取，或者延时器
        window.onload = function(){
            waterFall()
        }
    </script>
</body>
</html>